<template>
  <el-container>
    <vHeadSpace/>
    <el-container>
      <vAsideSpace/>
      <el-container>
        <el-main class="main">
          <el-row>
            <el-col>
              <el-button
                  @click="getResByFilter"
                  icon="el-icon-search"
                  type="primary"
                  size="mini"
                  style="float: right; margin-left: 10px;padding-bottom: 10px;">搜索</el-button>
              <el-select
                  clearable
                  v-model="loginType"
                  placeholder="请选择登录类型"
                  size="small" style="float: right; margin-left: 10px">
                <el-option
                    v-for="item in types"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
              <el-select
                  clearable
                  v-model="loginRes"
                  placeholder="请选择登录结果"
                  size="small" style="float: right; margin-left: 10px;">
                <el-option
                    v-for="item in results"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
              <el-date-picker
                  size="small"
                  style="float: right; margin-left: 10px"
                  v-model="dateEnd"
                  type="date"
                  placeholder="请选择结束日期">
              </el-date-picker>
              <el-date-picker
                  size="small"
                  style="float: right; margin-left: 10px"
                  v-model="dateStart"
                  type="date"
                  placeholder="请选择开始日期">
              </el-date-picker>
            </el-col>
          </el-row>
          <el-row align="center" style="margin-top: 10px">
            <el-table stripe :data="currentLogList" :row-style="rowStyle"
                      :cell-style="{padding:'1px'}">
              <el-table-column prop="logintime" label="登陆时间">
              </el-table-column>
              <el-table-column prop="type" label="登录类型"/>
              <el-table-column prop="ip" label="登录IP"/>
              <el-table-column prop="result" label="结果"/>
              <el-table-column prop="username" label="登录名"/>
              <el-table-column prop="description" label="描述"/>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total_num"
                style="text-align: center"
            />
          </el-row>
        </el-main>
        <vFootSpace/>
      </el-container>
    </el-container>
  </el-container>
</template>
<script>
export default {
  name: "LoginLog",
  data() {
    return {
      // 总条数
      total_num: 0,
      // 总数据
      loginLogList: [],
      // 当前显示的数据
      currentLogList: [],
      // 当前页码
      currentPage: 1,
      // 页面大小
      pageSize: 10,
      // 登录类型
      loginType: '',
      types: [
        {
          value: '登录',
          label: '登录'
        },
        {
          value: '退出',
          label: '退出'
        }
      ],
      // 登录结果
      loginRes: '',
      results: [
        {
          value: '成功',
          label: '成功'
        },
        {
          value: '失败',
          label: '失败'
        }
      ],
      // 开始与结束时间
      dateStart: '',
      dateEnd: ''
    }
  },
  methods: {
    // 获取所有的结果
    getAllLoginLogs() {
      this.$axios({
        url: '/loginlos/queryAllLogs.action',
        method: 'POST'
      }).then((res) => {
        this.loginLogList = res.data
        this.total_num = this.loginLogList.length
        this.dataChange()
        // console.log(this.loginLogList)
      })
    },
    // 处理页面大小改变
    handleSizeChange(val) {
      this.pageSize = val
      this.dataChange()
    },
    // 处理当前页改变
    handleCurrentChange(val) {
      this.currentPage = val
      this.dataChange()
    },
    // 提取的公共代码
    dataChange() {
      this.currentLogList = this.loginLogList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    },
    // 表格的样式
    rowStyle({row, rowIndex}) {
      let style = {height: '30px'}
      if (row.result === '失败') {
        style.color = 'red'
      }
      // console.log(row)
      return style
    },
    // 复用过滤的函数
    getResByFilter() {
      // 重置页码和页面大小
      this.currentPage = 1;
      this.pageSize = 10;
      let startTime = '', endTime = '';
      // 选定的时间不为空，再进行处理
      if (this.dateStart && this.dateEnd) {
        if (this.dateStart.getTime() > this.dateEnd.getTime()) {
          return this.$message.error('开始时间不能大于结束时间');
        }
        startTime = this.dateStart.toLocaleDateString().replaceAll('/', '-') + " 00:00:00";
        endTime = this.dateEnd.toLocaleDateString().replaceAll('/', '-') + " 23:59:59";
      } else if (this.dateStart) {
        return this.$message.error('请指定结束时间');
      } else if (this.dateEnd) {
        return this.$message.error('请指定开始时间');
      }
      if (startTime === '' && endTime === '') {
        return this.getAllLoginLogs();
      }
      this.$axios({
        url: '/loginlos/queryLogsByFilter.action',
        method: 'POST',
        data: {
          type: this.loginType,
          result: this.loginRes,
          startTime: startTime,
          endTime: endTime,
        }
      }).then((res) => {
        // console.log(res)
        // 填充数据，渲染页面
        this.loginLogList = res.data;
        this.total_num = this.loginLogList.length
        this.dataChange()
      })
    }
  },
  mounted() {
    this.getAllLoginLogs()
  }
}
</script>

<style scoped>

</style>
